<template>
    <div class="help-and-feedback">
        <div class="header">
            <h1>帮助与反馈</h1>
        </div>

        <div class="contact-cs">
            <span>联系客服解决问题</span>
            <el-button class="cs-button" @click="handleCustomerService">联系客服</el-button>
        </div>

        <h3>常见问题</h3>
        <!-- 常见问题按钮组 -->
        <div class="common-questions">
            <div class="question-buttons">
                <el-button v-for="(item, index) in questionItems" :key="index" class="question-btn"
                    :class="{ 'active': activeQuestion === index }" @click="activeQuestion = index">
                    {{ item }}
                </el-button>
            </div>

            <div class="feedback-form">
                <el-form>
                    <!-- 反馈输入框 -->
                    <el-form-item>
                        <span class="required">*</span>
                        <label style="color: #888888;">我要反馈 (0/200)</label>
                        <el-input v-model="content" type="textarea" placeholder="请写下您对我们产品的反馈，以及遇到的问题，我们会尽快解决，感谢支持！"
                            :rows="8"></el-input>
                    </el-form-item>

                    <!-- 图片上传 -->
                    <!-- <span style="color: #888888;font-size: 14px;">上传图片</span> -->

                    <!-- <el-upload action="" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList"
                        style="margin-top: 20px;">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload> -->

                    <!-- 提交按钮 -->
                    <el-form-item>
                        <div class="submit-btn">
                            <el-button class="submit-feedback" type="primary" @click="submit()">提交反馈</el-button>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 反馈表单区域 -->

    </div>
</template>

<script setup>
defineOptions({
    name: 'HelpAndFeedback'
})
import { ref } from 'vue';
import { ElTabs, ElTabPane, ElInput, ElButton, ElUpload } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { submitUserFeedback } from '@/api/user';
import { ElMessage } from 'element-plus'
import successIcon from '@/assets/images/success-icon.png'
import errorIcon from '@/assets/images/error-icon.png'
import warningIcon from '@/assets/images/warning-icon.png'

// 常见问题选项
const questionItems = [
    '其他',
    '游戏愿望单',
    '经常排队',
    '卡顿',
    '画质模糊',
    '黑屏/掉线',
    '功能',
    '用户体验'
];

//反馈信息文本
const content = ref('');

// 当前选中的问题索引
const activeQuestion = ref(0);

// 上传的文件列表
const fileList = ref([

]);



const submit = () => {
    _submitUserFeedback()
};

// 意见反馈
const _submitUserFeedback = async () => {
    var panamr = {
        "type": activeQuestion.value,
        "content": content.value,
        // "images": ""
    };
    submitUserFeedback(panamr).then((res) => {
        initParams();
        //提交成功
        ElMessage({
            type: 'success',
            customClass: 'custom-success-message-icon',
            dangerouslyUseHTMLString: true,
            message: `<img src="${successIcon}" alt="success-icon" style="width: 20px; height: 20px; margin-right: 4px;">已成功反馈，等待客服联系`,
            offset: 65
        })
    }).catch((err) => {
        console.log(err);
    });
};
//初始化参数
const initParams = () => {
    content.value = '';
    fileList.value = [];
    activeQuestion.value = 0;
};
// 移除文件回调
const handleRemove = (file) => {
    const index = fileList.value.findIndex((item) => item.url === file.url);
    if (index !== -1) {
        fileList.value.splice(index, 1);
    }
};

// 预览
const handlePictureCardPreview = (file) => {
    window.open(file.url);
};

// 上传前回调
const beforeUpload = (file) => {
    fileList.value.push({ url: URL.createObjectURL(file) });
    return false; // 阻止自动上传
};
// 客服处理
const handleCustomerService = () => {
    // 这里可以添加联系客服的逻辑
    var url = 'https://qm.qq.com/cgi-bin/qm/qr?k=p1f1Mwt7ximQW1smJbvqXlUnWeh19nDy&jump_from=webapi&authKey=+Xx1/siIjCOTE4NpoiJJrMOQdKuC2tzlixf+0vzYcRnUj58GY5Ys/oZ7e2CcImLr';
    // 发送消息给C#后端
    window.chrome.webview.postMessage({
        action: 'openExternalBrowser',
        url: url
    });
}
</script>

<style scoped>
/* 调整上传按钮（加号图标容器）的大小 */
:deep(.el-upload--picture-card) {

    width: 70px;
    /* 宽度 */
    height: 70px;
    /* 高度 */
    line-height: 70px;
    background: #121517;
    border: none
        /* 使图标垂直居中 */
}

/* 调整已上传图片的卡片大小 */
:deep(.el-upload-list__item) {
    width: 70px;
    /* 与上传按钮保持一致 */
    height: 70px;
}

/* 确保图片在卡片内正确显示 */
:deep(.el-upload-list__item-thumbnail) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持图片比例，填满容器 */
}

/* 调整加号图标的大小 */
:deep(.el-upload--picture-card .el-icon) {
    font-size: 28px;
    color: #E2E2E2;
    /* 图标大小 */
}

:deep(.el-textarea__inner) {
    background-color: #121517;
    padding: 20px 16px;
}

/* 取消textarea边框并修改placeholder颜色 */
:deep(.el-textarea__inner) {
    background-color: #121517;
    border: none;
    /* 取消边框 */
    box-shadow: none;
    /* 移除可能存在的阴影边框 */
}

/* 修改placeholder颜色 */
:deep(.el-textarea__inner)::placeholder {
    color: #888888 !important;
}



.help-and-feedback {
    background-color: #121517;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h1 {
    font-size: 24px;
    margin: 0;
    color: #E2E2E2;
    font: "Microsoft YaHei UI";
    font-weight: bold;
}

.contact-cs {
    background: #27292C;
    height: 60px;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    font-size: 14px;
    font-style: 'Bold';
}

.cs-button {
    border: 1px solid #FFE500;
    color: #FFE500;
    background-color: transparent;
}

.h3 {
    font: 'Microsoft YaHei UI';
    color: #888888;
    font-size: 16px;
    font-size: 'Regular';
}

.common-questions {
    margin-top: 20px;
    background: #27292C;
    padding: 20px;
}

/* 问题按钮组样式 */
.question-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.question-btn {
    background-color: #2E3033;
    border: 1px solid transparent;
    color: #E2E2E2;
    padding: 6px 12px;
    border-radius: 4px;
    height: 30px;
    transition: all 0.2s ease;
}

.question-btn.active {
    border-color: #FFE500;
    color: #FFE500;
}

.question-btn:not(.active):hover {
    color: #fff;
    border-color: rgba(255, 229, 0, 0.3);
}

.feedback-form .required {
    color: red;
    margin-right: 4px;
}

.feedback-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.el-input__textarea {
    background-color: #2c2c2c;
    color: #fff;
    border-color: #3c3c3c;
}

.el-input__textarea::placeholder {
    color: #aaa;
}

.submit-btn {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    width: 100%;
    padding: 0;
    /* 清除可能存在的内边距，确保居中范围完整 */
}

.submit-feedback {
    background-color: #FFE500;
    color: #121212;
    border: none;
    width: 150px;
    height: 48px;
}

.submit-feedback:hover {
    background-color: #ffd900;
}
</style>
